<template>
	<view>
		<pug-skeleton
			:fange="3"
			:fangeWidth="['30%', '30%', '30%']"
			:fangeHeight="['50', '50', '50']"
			:loading="resultArr[tabIndex].loading"
		></pug-skeleton>
		<pug-skeleton rows="5" :rowsWidth="['100%', '100%', '100%', '100%', '100%']" 
		:rowsHeight="['100', '100', '100', '100', '100']" 
		:loading="resultArr[tabIndex].loading">
			<view class="pug-tabbar-top">
				<u-tabbar :value="tabIndex" :fixed="false" :border="false" @change="changeTab" :placeholder="false" :safeAreaInsetBottom="false">
					<u-tabbar-item v-for="(item,index) in resultArr" :text="item.title"  :icon="item.icon"></u-tabbar-item>
				</u-tabbar>
			</view>

			<view class="aui-news-box">
				<view v-for="(list, index) in resultArr[tabIndex].messageList" :key="list.id" @click="navTo(index)" class="aui-news-item">
					<view class="aui-news-item-hd"><image :src="list.icon" class="img" /></view>
					<view class="aui-news-item-bd">
						<view class="tlt">{{ list.title }}</view>
						<view class="cont">{{list.msgcontent }} = {{ list.createTime }}</view>
						<text  v-if="list.checked==1"></text>
						<text  v-else class="dot checked"></text>
					</view>
				</view>
				<!--暂无数据处理-->
				<u-empty mode="data" v-if="resultArr[tabIndex].total == 0" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				<pug-loading v-if="resultArr[tabIndex].total > 0" :loadType="resultArr[tabIndex].loadType" :bottom="0"></pug-loading>
				<!-- #ifdef MP-WEIXIN || APP -->
				<pug-userinfo></pug-userinfo>
				<!-- #endif -->
			</view>
			<!-- <view>{{resultArr[tabIndex].pageNo}}==={{resultArr[tabIndex].pages}}=={{resultArr[tabIndex].total}}</view> -->
		</pug-skeleton>
	</view>
</template>

<script>
import messageService from '@/service/message/MessageService';
export default {
	data() {
		return {
			title: 'Hello',
			tabIndex: 0,
			ctabIndex:-1,
			resultArr: [
				{
					title: '订单消息',
					pageNo: 1,
					pageSize: 10,
					messageList: [],
					pages: 0,
					icon:"chat",
					total: 0,
					loading: true,
					loadType: -1
				},
				{
					title: '我的消息',
					pages: 0,
					total: 0,
					pageNo: 1,
					pageSize: 10,
					icon:"email",
					messageList: [],
					loading: false,
					loadType: -1
				},
				{
					title: '系统消息',
					pages: 0,
					total: 0,
					pageNo: 1,
					pageSize: 10,
					loadType: -1,
					icon:"bell",
					loading: false,
					messageList: []
				}
			]
		};
	},

	onReachBottom() {
		// 滚动分页
		uni.$u.debounce(this.loadMore, 500);
	},
	
	onPullDownRefresh(){
		
		this.resultArr[this.tabIndex].pageNo = 1;
		this.resultArr[this.tabIndex].messageList=[];
		//  初始骨架屏幕
		this.resultArr[this.tabIndex].loading = true;
		// 使用页面的生命周期执行消息初始化
		this.loadData();	
	},
	
	onLoad() {
	
	},

	onShow() {
		if(this.ctabIndex == this.tabIndex){
			return;
		}
		this.tabIndex = 0;
		this.resultArr[this.tabIndex].messageList=[];
		//  初始骨架屏幕
		this.resultArr[this.tabIndex].loading = true;
		// 使用页面的生命周期执行消息初始化
		this.loadData();
	},

	methods: {
		
		// 1：查询日志信息
		loadData() {
			if (this.tabIndex == 0) {
				this.loadOrderMessage()
			} else if (this.tabIndex == 1) {
				this.loadUserMessage();
			} else if (this.tabIndex == 2) {
				this.loadSysMessage();
			}
		},
		
		
		// 加载订单消息
		async loadOrderMessage(callback) {
			try {
				// 准备获取当前的操作元素 -- 订单对象
				var resultElement = this.resultArr[this.tabIndex];
				// 加载动画效果开始
				resultElement.loadType = 0;
				// 准备请求服务端的参数
				var params = { pageNo: resultElement.pageNo, pageSize: resultElement.pageSize};
				// 执行请求数据库返回数据
				var serverResponse = await messageService.findOrderMesagePage(params);
				// res就是服务器返回给我们的消息数据,进行累加到当前页面
				resultElement.messageList = resultElement.messageList.concat(serverResponse.data.content);
				// 把总数，，和总页数都返回出来
				resultElement.total = serverResponse.data.totalElements;
				resultElement.pages = serverResponse.data.totalPages;
				// 加载动画直接结束
				resultElement.loadType = 1;
				// 关闭下拉刷新的效果
				uni.stopPullDownRefresh();
				setTimeout(() => (resultElement.loading = false), 300);
			} catch (e) {
				setTimeout(() => (resultElement.loading = false), 300);
			}
		},
		
		
		// 加载系统消息
		async loadSysMessage() {
			try {
				var resultElement = this.resultArr[this.tabIndex];
				resultElement.loadType = 0;
				var params = { pageNo: resultElement.pageNo, pageSize: resultElement.pageSize };
				var res = await messageService.findSysMesagePage(params);
				resultElement.messageList = resultElement.messageList.concat(res.data.content);
				resultElement.total = res.data.totalElements;
				resultElement.pages = res.data.totalPages;
				resultElement.loadType = 1;
				// 关闭下拉刷新的效果
				uni.stopPullDownRefresh();
				setTimeout(() => (resultElement.loading = false), 300);
			} catch (e) {
				setTimeout(() => (resultElement.loading = false), 300);
			}
		},

		
		// 加载用户消息
		async loadUserMessage() {
			try {
				var resultElement = this.resultArr[this.tabIndex];
				resultElement.loadType = 0;
				var params = { pageNo: resultElement.pageNo, pageSize: resultElement.pageSize};
				var res = await messageService.findUserMesagePage(params);
				resultElement.messageList = resultElement.messageList.concat(res.data.content);
				resultElement.total = res.data.totalElements;
				resultElement.pages = res.data.totalPages;
				resultElement.loadType = 1;
				this.resultElement[this.tabIndex] = resultElement;
				// 关闭下拉刷新的效果
				uni.stopPullDownRefresh();
				setTimeout(() => (resultElement.loading = false), 300);
			} catch (e) {
				setTimeout(() => (resultElement.loading = false), 300);
			}
		},

		// 3：改变分类
		changeTab(e) {
			this.tabIndex = e;
			var resultElement = this.resultArr[this.tabIndex];
			// 清空上一次，从新开始
			resultElement.pageNo = 1;
			resultElement.messageList = [];
			this.loadData();
		},

		// 2: 加载更多和分页
		loadMore() {
			var resultElement = this.resultArr[this.tabIndex];
			if (resultElement.pageNo == resultElement.pages) {
				resultElement.loadType = 2;
				return;
			}

			resultElement.pageNo++;
			resultElement.loadData();
		},
		
		// 3: 点击调整到某页
		navTo(index){
			// 作用是用来，控制查看明细以后返回的时候进入到onShow不在加载
			this.ctabIndex = this.tabIndex;
			if(this.tabIndex == 0){
				var messageId = this.resultArr[this.tabIndex].messageList[index].id;
				var opid = this.resultArr[this.tabIndex].messageList[index].opid;
				// 不需要去给予提醒
				messageService.saveUserMessageStatus({messageId}).then(res=>{
					// 点击以后立即修改成已读状态即可，不需要去刷新一次
					if(res.data){
						this.resultArr[this.tabIndex].messageList[index].checked = 1;	
					}
				});
				
				// 订单指定的页面
				uni.navigateTo({
					url:"/pagesorder/orderresult/orderresult?opid="+opid+"&index="+this.tabIndex
				})
			}else if(this.tabIndex == 1){
				// 跳转用户指定的页面
				// 订单指定的页面
				var opid = this.resultArr[this.tabIndex].messageList[index].opid;
				uni.navigateTo({
					url:"/pagesorder/orderresult/orderresult?opid="+opid+"&index="+this.tabIndex
				})
			}else if(this.tabIndex == 2){
				// 跳转系统指定的的页面
			}
		}
	}
};
</script>

<style>
.pug-tabbar-top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 1em #ddd;
	background: #f8f8f8;
	z-index: 1;
}

/* 必要布局样式css */
.aui-flexView {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.aui-scrollView {
	width: 100%;
	height: 100%;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
	/* margin-top: -44px; */
}

.aui-navBar {
	height: 44px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	z-index: 1002;
	background: #ffffff;
}

.aui-navBar:after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #ffffff;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.aui-navBar-item {
	height: 44px;
	min-width: 25%;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 25%;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	padding: 0 0.9rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 0.7rem;
	white-space: nowrap;
	overflow: hidden;
	color: #a0a0a0;
	position: relative;
}

.aui-navBar-item:first-child {
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	margin-right: -25%;
	font-size: 0.9rem;
	font-weight: bold;
}

.aui-navBar-item:last-child {
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.aui-center {
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 44px;
	width: 50%;
	margin-left: 25%;
}

.aui-center-title {
	text-align: center;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	font-size: 0.95rem;
	color: #3c3c3c;
}

.icon {
	width: 20px;
	height: 20px;
	display: block;
	border: none;
	float: left;
	background-size: 20px;
	background-repeat: no-repeat;
}

.icon-return {
	background-image: url('');
}

.icon-sys {
	background-image: url('');
	margin-right: 10px;
}

.icon-fre {
	background-image: url('');
}

.aui-news-box {
	margin-top: 58px;
	background: #fff;
}

.aui-news-item {
	padding: 15px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.aui-news-item-hd {
	margin-right: 0.8em;
	line-height: 55px;
	text-align: center;
	background: #fff;
	border-radius: 15px;
}

.img {
	width: 55px;
	height: 55px;
}
.aui-news-item-hd img {
	width: 100%;
	max-height: 100%;
	vertical-align: top;
}

.aui-news-item-bd {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	min-width: 0;
	margin-top: -40rpx;
}

.aui-news-item-bd .tlt {
	font-weight: 600;
	font-size: 16px;
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	word-wrap: break-word;
	word-break: break-all;
	padding-bottom: 10px;
	color: #333;
}

.aui-news-item-bd .cont {
	color: #848689;
	font-size: 13px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.aui-news-item:before {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #d8d8d8;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.aui-news-item-fr {
	text-align: right;
	font-size: 0.8rem;
	color: #8c8c8c;
	margin-top: -25px;
}

.dot.checked {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #f1a532;
	display: inline-block;
	position: absolute;
	top: 20px;
	right: 15px;
}
</style>
